<template>
  <div class="nav-tabs">
    <div
        :class="['tab', { active: $route.path === '/home' } ]">
        首页
    </div>
      <div
        :class="['tab', { active: $route.path === tab.path } ]"
        @click="push(tab.path)"
        @contextmenu.prevent="menuItemShow($event,index)"
        v-for="(tab,index) in $store.state.base.navTabs" :key="tab.path">
        <span>{{ tab.name }}</span>
        <i
        @click.stop="delTab(index)"
        class="el-icon-close"></i>

      </div>
      <div class="tab-pop"
            :style="{left: left+'px', top: top+'px'}"
            v-show="tabItemShow">
        <div class="tab-item-menu" @click="$router.go(0)">刷新</div>
        <div class="tab-item-menu" @click="closeSelf">关闭</div>
        <div class="tab-item-menu" @click="closeOther">关闭其他</div>
        <div class="tab-item-menu" @click="closeAll">关闭所有</div>

      </div>
   </div>
</template>

<script>
export default {
  data () {
    return {
      tabItemShow: false,
      left: 0,
      right: 0,
      delIndex: -1
    }
  },
  mounted () {
    // 点击任意空白处关闭弹窗

    document.onclick = () => {
      this.tabItemShow = false
    }
  },
  methods: {

    // 右键显示弹窗
    menuItemShow (e, index) {
      // console.log(55);
      this.tabItemShow = true
      this.left = e.clientX
      this.top = e.clientY
      // 将点击的下标赋值给deiIndex
      this.delIndex = index
    },
    // 点击图标删除tab
    delTab (index) {
      // console.log(33);
      this.$store.commit('base/DEL_TAB', index)
    },
    // 点击关闭自己
    closeSelf () {
      this.$store.commit('base/DEL_TAB', this.delIndex)
    },
    // 点击关闭其他
    closeOther () {
      this.$store.commit('base/CLOSE_OTHER', this.delIndex)
    },
    // 点击关闭所有
    closeAll () {
      this.$store.commit('base/CLOSE_ALL')
    }

  }

}
</script>

<style lang="scss" scoped>
.nav-tabs{
   display: flex;
    width: 100%;
    overflow-x: auto;
    margin-top: -10px;
    margin-bottom: 15px;
    .tab{
      line-height: 28px;
      flex-shrink: 0;
      padding: 0 8px;
      margin-left: 10px;
      background-color: #fff;
      border-radius: 5px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      &.active{
        color: rgb(39, 168, 212);
      }
      }
      .tab-pop{
        position: fixed;
        background-color: pink;
        border-radius: 3px;
        margin-top: 25px;
        .tab-item-menu{
          font-size: 12px;
          line-height: 28px;
          align-content: center;
          padding: 10px 10px;
          cursor: pointer;

        }
      }
    }

</style>
